<template>
  <div>

       <header class="">
             <div class="navbar navbar-default visible-xs">
               <button type="button" class="navbar-toggle collapsed">
                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
               </button>
               <a href="/" class="navbar-brand">在线视频教育平台</a>
             </div>
           
             <nav class="sidebar">
               <div class="navbar-collapse" id="navbar-collapse">
                 <div class="site-header hidden-xs">
                     <a class="site-brand" href="/" title="">
                       <img class="img-responsive site-logo" alt="" src="../assets/assets_2/images/mashup-logo.svg">
                       在线视频教育平台
                     </a>
                   <p>
                     课程分类
           
                   </p>
                 </div>
                 <ul class="nav">
                   <li><a href="/" title="">首页</a></li>
                   <li>
                     
                    <!-- <a href="/upload" title="上传课程">上传课程</a> -->

                    <router-link to='/upload'>上传课程</router-link>
                  
                  </li>
                   <li>

                      <router-link to='/order'>我的订单</router-link>

                   </li>
                   <li>

                      <router-link to='/client'>我的客服</router-link>

                   </li>
                   <li><a href="./components.html" title="">Components</a></li>
           
                 </ul>
           
                 <div>

                      

                  <div v-if="username==''">

                      <router-link to='/login'>登录</router-link>/<router-link to='/register'>注册</router-link>
          
                  </div>
                  <div v-else >
          
                      欢迎您：{{ username }}  &nbsp;&nbsp; <a href="#" @click="logout">登出</a>
          
                  </div>


                  <br /><br />
                  <!-- 购物车 -->

                  <Badge :count="total" >

                    <div class="text-center">

                      <a href="/cart">购物车</a>

                    </div>

                  </Badge>

                  <br /><br />

                  <!-- 检索功能 -->
                  <p>

                    <Search @search="search" showSearchButton v-model="text" ></Search>

                  </p>

                  <!-- 在线人数统计 -->

                  在线人数:{{ online }}


                 </div>


               </div> 
             </nav>
            
           </header>
  
           
  </div>
</template>


 
<script>

export default {
  data () {
    return {
      msg: "这是一个变量",
      username:'',
      text:'',
      //在线人数
      online:0,
      //定义定时器
      timer:''
    }
  },
  //接收参数
  props:['total'],
  //清除已经失效的定时器
  beforeDestroy(){

      clearInterval(this.timer);

  },
  mounted:function(){

      //利用定时器进行轮询  单位 毫秒
      //this.timer = setInterval(this.getonline,3000);


      //获取在线人数

      this.axios.get('http://localhost:8000/getonline/').then((result) => {

          console.log(result);

          //赋值
          this.online = result.data.onlines;
         
      });

      //接收参数
      var sina_id = this.$route.query.sina_id;
      console.log(sina_id);
      if(sina_id){
        //自动登录
        localStorage.setItem('username',sina_id);
        localStorage.setItem('uid',this.$route.query.uid);
        //将token加入storage
        localStorage.setItem('token',this.$route.query.token);
      }


      //判断用户是否登录
      var uname = localStorage.getItem('username');

      console.log(uname);

      if(uname==null){

         //赋值操作
      this.username = '';
      console.log(uname);

      }else{

        //赋值操作
      this.username = uname;
      console.log(uname);

      }

      

},
  methods:{
    //定义获取在线人数方法
    getonline(){

        //this.online++;
        

        this.axios.get('http://localhost:8000/getonline/').then((result) => {

          console.log(result);

          //赋值
          this.online = result.data.onlines;

        });

        console.log(this.online);

    },
    //定义检索逻辑
    search(){

      console.log(this.text);

      this.$router.push({path:'/search',query:{word:this.text}});





    },
    //登出
    logout(){

      //删除localstorage
      localStorage.removeItem("username");

      //全部删除
      //localStorage.clear();

      //跳转页面
      this.username = '';
      this.$router.push('/');



    }


  }
}


</script>
 
<style>



</style>